<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src='<%= Url.Content("~/Scripts/jquery.galleria.js") %>'></script>
    
    <h2>
        Event Gallery</h2>
    <div id="gallery">
        <%--<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0"
            width="800" height="690" id="gallery" align="middle">
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="true" />
            <param name="movie" value="/Gallery/gallery.swf" />
            <param name="quality" value="high" />
            <param name="scale" value="noscale" />
            <param name="bgcolor" value="#000000" />
            <embed src="/Gallery/gallery.swf" quality="high" allowfullscreen="true" scale="noscale"
                bgcolor="#000000" width="800" height="690" name="gallery" align="middle" allowscriptaccess="sameDomain"
                type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>--%>
        
        <script type="text/javascript">
	
	jQuery(function($) {
		
		$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
		
		$('ul.gallery_demo').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				
				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
	});
	
	</script>

<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">

    <li><img src="/Gallery/gallery/1.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
    <li><img src="/Gallery/gallery/2.jpg" alt="Stones" title="Stones - from Apple images"></li>
    <li class="active"><img src="/Gallery/gallery/3.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
    <li><img src="/Gallery/gallery/4.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
    <li><img src="/Gallery/gallery/5.jpg" alt="Lightning" title="Black &amp; White"></li>
    <li><img src="/Gallery/gallery/6.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
    <li><img src="/Gallery/gallery/7.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
    <li><img src="/Gallery/gallery/8.jpg" alt="Pier" title="Proin erat nisi"></li>
    <li><img src="/Gallery/gallery/9.jpg" alt="Sea Mist" title="Caption text from title"></li>

</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>

	
    </div>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
</asp:Content>
